Web разработка

0:12

This media is not supported in your browser

VIEW IN TELEGRAM

💡Совет CSS и JS💡

Этот вариант теперь работает во всех браузерах и поддерживает настройки движения через CSS и JS

Размытый текст при выходе?

@ keyframes fade {
  to { opacity: 0; filter: blur(2rem); }
}
h2 {
  animation: fade;
  animation-timeline: view();
  animation-range: cover 40% cover 85%;
}

Как насчет круглой формы на прокрутке? Это анимированный клип-патч

@ keyframes unclip {
  to { clip-path: ellipse(220% 200% at 50% 175%); }
}

Создайте клип-пат с большим размером, смещенный по вертикали. При прокрутке анимируйте его

.content {
  clip-path: ellipse(220% 200% at 50% 300%);
  animation: unclip both linear;
  animation-timeline: --article;
  animation-range: entry;
}

Вторая секция сочетает в себе открепление и одновременное уменьшение масштаба изображения

@ keyframes scale-down {
  0% { scale: 5; }
}
img {
  animation: scale-down;
  animation-timeline: --article; 
  animation-range: entry;
}

www.tg-me.com/ua/Web разработка/com.htmlcssjavas/934

1.4K viewsJan 18, 2024 at 12:56

💡Совет CSS и JS💡

Этот вариант теперь работает во всех браузерах и поддерживает настройки движения через CSS и JS

Размытый текст при выходе?

@ keyframes fade {
  to { opacity: 0; filter: blur(2rem); }
}
h2 {
  animation: fade;
  animation-timeline: view();
  animation-range: cover 40% cover 85%;
}

@ keyframes unclip {
  to { clip-path: ellipse(220% 200% at 50% 175%); }
}

.content {
  clip-path: ellipse(220% 200% at 50% 300%);
  animation: unclip both linear;
  animation-timeline: --article;
  animation-range: entry;
}

@ keyframes scale-down {
  0% { scale: 5; }
}
img {
  animation: scale-down;
  animation-timeline: --article; 
  animation-range: entry;
}

BY Web разработка